<template>
    <div>
        <div class="mb10" v-if="jurisdiction.add_state === 1">
            <el-button size="mini" type="primary"  @click="add()">添 加</el-button>
        </div>
        <span v-else></span>
        <div class="table">
            <!-- 表格 -->
            <el-table
                :data="clerkTable"
                border
                height="560"
                :style="{width:screenWidth+'px'}"
                :cell-style="cellStyle"
                :header-cell-style="rowClass"
                @selection-change="allSelectionChange"
            >
                <!-- <el-table-column type="selection" width="60px"></el-table-column> -->
                <el-table-column label="序号" width="80px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.id }}</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="城市" width="140px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.city }}</span>
                    </template>
                </el-table-column> -->
                <!-- <el-table-column
                    prop="type"
                    :filters="carTypeFilterList"
                    :filter-method="carTypeFilterHandler"
                    label="车辆类型"
                    width="160px"
                >
                    <template slot-scope="scope">
                        <span>{{ scope.row.type | filtype }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="洗车模式" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.level | filstate }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="洗车次数" width="100px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.wash_num }}次</span>
                    </template>
                </el-table-column> -->
                <el-table-column label="套餐价格" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.price }}元</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="次卡有效期" width="100px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.end_time }}天</span>
                    </template>
                </el-table-column> -->
                <el-table-column label="优惠券数量" width="100px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.coupon_num }}张</span>
                    </template>
                </el-table-column>
                <el-table-column label="优惠券面值" width="100px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.coupon_money }}元</span>
                    </template>
                </el-table-column>
                <el-table-column label="优惠券名称" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.coupon_name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="优惠券有效期" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.coupon_time }}天</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200px" v-if="jurisdiction.update_state === 1 || jurisdiction.delete_state === 1 ">
                    <template slot-scope="scope">
                        <el-button
                            v-if="jurisdiction.update_state === 1"
                            size="small"
                            type="primary"
                            @click="edit(scope.$index, scope.row)"
                        >修改</el-button>
                        <el-button
                            v-if="jurisdiction.delete_state === 1"
                            size="small"
                            type="danger"
                            @click="delClerk(scope.$index, scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <el-pagination
                @size-change="city"
                @current-change="currentcity"
                :current-page="currentPage"
                :page-sizes="[100, 500,1000,1500, 2000]"
                :page-size="curcity"
                layout="prev, pager, next, jumper, sizes,total"
                :total="pageResultSize"
            ></el-pagination>
        </div>
        <div>
            <!-- 添加对话框 addClcity-->
            <el-dialog title="添加" width="600px" :visible.sync="addVisible" center @close="closeAdd">
                <el-form :model="addClerk" :rules="rules" ref="addClerk">
                    <!-- <div class="flex">
                        <el-form-item label="城市：" :label-width="formLabelWidth" prop="city">
                            <el-select v-model="addClerk.city" clearable placeholder="请选择套餐城市">
                                <el-option
                                    v-for="(item,index) in cityname"
                                    :key="index"
                                    :label="item.city"
                                    :value="item.city"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item
                            label="车辆类型："
                            :label-width="formLabelWidth"
                            prop="type"
                        >
                            <el-select v-model="addClerk.type" clearable placeholder="请选择套餐车辆类型">
                                <el-option
                                    v-for="(item,index) in cartype"
                                    :key="index"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item
                            label="洗车模式："
                            :label-width="formLabelWidth"
                            prop="level"
                        >
                            <el-select v-model="addClerk.level" clearable placeholder="请选择套餐的洗车模式">
                                <el-option
                                    v-for="(item,index) in carpattern"
                                    :key="index"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </div> -->
                    <div class="flex">
                        <!-- <el-form-item label="充值次数：" :label-width="formLabelWidth" prop="wash_num">
                            <el-col :span="18"><el-input clearable v-model="addClerk.wash_num" placeholder="请输入套餐充值次数"></el-input></el-col>
                        </el-form-item> -->
                        <el-form-item label="套餐价格：" :label-width="formLabelWidth" prop="price">
                            <el-col :span="18"><el-input clearable v-model="addClerk.price" placeholder="请输入套餐对应的价格"></el-input></el-col>
                        </el-form-item>
                        <!-- <el-form-item label="有效期：" :label-width="formLabelWidth" prop="end_time">
                            <el-col :span="18"><el-input clearable v-model="addClerk.end_time" placeholder="请输入次卡套餐的有效时间（天）"></el-input></el-col>
                        </el-form-item> -->
                        <el-form-item label="优惠券数量：" :label-width="formLabelWidth" prop="coupon_num">
                            <el-col :span="18"><el-input clearable v-model="addClerk.coupon_num" placeholder="请输入套餐赠送优惠券数量（张）"></el-input></el-col>
                        </el-form-item>
                        <el-form-item label="优惠券面值：" :label-width="formLabelWidth" prop="coupon_money">
                            <el-col :span="18"><el-input clearable v-model="addClerk.coupon_money" placeholder="请输入套餐赠送优惠券数量（元）"></el-input></el-col>
                        </el-form-item>
                        <el-form-item label="优惠券名称：" :label-width="formLabelWidth" prop="coupon_name">
                            <el-col :span="18"><el-input clearable v-model="addClerk.coupon_name" placeholder="请输入套餐赠送优惠券数量（元）"></el-input></el-col>
                        </el-form-item>
                        <el-form-item label="优惠券有效期：" :label-width="formLabelWidth" prop="coupon_time">
                            <el-col :span="18"><el-input clearable v-model="addClerk.coupon_time" placeholder="请输入套餐赠送优惠券有效时间（天）"></el-input></el-col>
                        </el-form-item>
                    </div>
                </el-form>
                <div slot="footer">
                    <el-button @click="cancelAdd">取 消</el-button>
                    <el-button type="primary" @click="confirmAdd">确 定</el-button>
                </div>
            </el-dialog>
            <!-- 修改对话框 editClcity carTypeFilterList-->
            <el-dialog title="修改" width="60%" :visible.sync="editVisible" center @close="closeEdit">
                <el-form :model="editClerk" ref="editClerk" :rules="rules">
                    <!-- <div class="flex">
                        <el-form-item label="城市：" :label-width="formLabelWidth" prop="city">
                            <el-select v-model="editClerk.city" clearable placeholder="请选择套餐城市">
                                <el-option
                                    v-for="(item,index) in cityname"
                                    :key="index"
                                    :label="item.city"
                                    :value="item.city"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item
                            label="车辆类型："
                            :label-width="formLabelWidth"
                            prop="type"
                        >
                            <el-select v-model="editClerk.type" clearable placeholder="请选择套餐车辆类型">
                                <el-option
                                    v-for="(item,index) in cartype"
                                    :key="index"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item
                            label="洗车模式："
                            :label-width="formLabelWidth"
                            prop="level"
                        >
                            <el-select v-model="editClerk.level" clearable placeholder="请选择套餐的洗车模式">
                                <el-option
                                    v-for="(item,index) in carpattern"
                                    :key="index"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </div> -->
                    <div class="flex">
                        <!-- <el-form-item label="充值次数：" :label-width="formLabelWidth" prop="wash_num">
                            <el-col :span="18"><el-input clearable v-model="editClerk.wash_num" placeholder="请输入套餐充值次数"></el-input></el-col>
                        </el-form-item> -->
                        <el-form-item label="套餐价格：" :label-width="formLabelWidth" prop="price">
                            <el-col :span="18"><el-input clearable v-model="editClerk.price" placeholder="请输入套餐对应的价格"></el-input></el-col>
                        </el-form-item>
                        <!-- <el-form-item label="有效期：" :label-width="formLabelWidth" prop="end_time">
                            <el-col :span="18"><el-input clearable v-model="editClerk.end_time" placeholder="请输入次卡套餐的有效时间（天）"></el-input></el-col>
                        </el-form-item> -->
                        <el-form-item label="优惠券数量：" :label-width="formLabelWidth" prop="coupon_num">
                            <el-col :span="18"><el-input clearable v-model="editClerk.coupon_num" placeholder="请输入套餐赠送优惠券数量（张）"></el-input></el-col>
                        </el-form-item>
                        <el-form-item label="优惠券面值：" :label-width="formLabelWidth" prop="coupon_money">
                            <el-col :span="18"><el-input clearable v-model="editClerk.coupon_money" placeholder="请输入套餐赠送优惠券数量（元）"></el-input></el-col>
                        </el-form-item>
                        <el-form-item label="优惠券名称：" :label-width="formLabelWidth" prop="coupon_name">
                            <el-col :span="18"><el-input clearable v-model="editClerk.coupon_name" placeholder="请输入套餐赠送优惠券数量（元）"></el-input></el-col>
                        </el-form-item>
                        <el-form-item label="优惠券有效期：" :label-width="formLabelWidth" prop="coupon_time">
                            <el-col :span="18"><el-input clearable v-model="editClerk.coupon_time" placeholder="请输入套餐赠送优惠券有效时间（天）"></el-input></el-col>
                        </el-form-item>
                    </div>
                </el-form>
                <div slot="footer">
                    <el-button @click="cancelEdit">取 消</el-button>
                    <el-button type="primary" @click="confirmEdit">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import "../../../../static/scss/page.scss";
import utils from "../../../util/request";
export default {
    data() {
        return {
            // 分页
            jurisdiction: null,
            activeIndex: "/upnext",
            currentPage: 1, //初始页面
            curcity: 100, //当前页面的数据数量
            pageResultSize: 10, //表格数据总数
            screenWidth: window.innerWidth, //可视宽度
            addVisible: false, //添加对话框
            editVisible: false, //修改对话框
            formLabelWidth: "130px", //对话框的标签宽度
            cityname: "",
            addClerk: {
                // 添加对话框
                // city: "", //城市
                type: "", //车辆类型
                level: "",
                // wash_num: "",
                // end_time: "",
                price: "", //充值价格
                coupon_num: "",  //优惠券数量
                coupon_money: "", //优惠券金额
                coupon_time: "", //优惠券有效期
                coupon_name: "",
            },
            editClerk: {
                // 修改对话框
                id:"",
                // city: "", //城市
                // type: "", //车辆类型
                // level: "",
                // wash_num: "",
                // end_time: "",
                price: "", //充值价格
                coupon_num: "",  //优惠券数量
                coupon_money: "", //优惠券金额
                coupon_time: "",//优惠券有效期
                coupon_name: "",
                index: ""
            },
            carTypeFilterList: [
                {
                    text: "小汽车",
                    value: 1
                },
                {
                    text: "SUV",
                    value: 2
                },
                {
                    text: "MPV",
                    value: 3
                }
            ],
            rules:{
                city: [
                    { required: true, message: '请选择套餐对应的城市', trigger: 'change' }
                ], //城市
                type: [
                    { required: true, message: '请选择套餐使用的车型', trigger: 'change' }
                ], //车辆类型
                level: [
                    { required: true, message: '请选择套餐车型使用的使用模式', trigger: 'change' }
                ],
                wash_num: [
                    { required: true, message: '请输入套餐的洗车次数', trigger: 'blur' }
                ], //充值价格
                price: [
                    { required: true, message: '请输入套餐的价格', trigger: 'blur' }
                ],
                end_time: [
                    { required: true, message: '请输入套餐的有效时间', trigger: 'blur' }
                ],
                coupon_num: [
                    { required: true, message: '请输入套餐赠送的优惠券数量', trigger: 'blur' }
                ],  //优惠券数量
                coupon_money: [
                    { required: true, message: '请输入套餐赠送的优惠券面值', trigger: 'blur' }
                ], //优惠券金额
                coupon_time: [
                    { required: true, message: '请输入套餐赠送的优惠券有效时间', trigger: 'blur' }
                ],//优惠券有效期
                coupon_name: [
                    { required: true, message: '请输入套餐赠送的优惠券名称', trigger: 'blur' }
                ],//优惠券名称
            },
            clerkTable: [
                {
                    city: "深圳", //城市
                    carType: "小汽车", //车辆类型
    // city: "4", //充值次数
                    topUpPrice: "60", //充值价格
                    memberLimit: "90", //会员限制
                    coupon: "3", //优惠券数量
                    couponPrice: "4", //优惠券金额
                    couponPriceLimit: "90" //优惠券有效期
                },
                {
                    city: "深圳", //城市
                    carType: "SUV", //车辆类型
    // city: "5", //充值次数
                    topUpPrice: "100", //充值价格
                    memberLimit: "90", //会员限制
                    coupon: "3", //优惠券数量
                    couponPrice: "6", //优惠券金额
                    couponPriceLimit: "90" //优惠券有效期
                },
                {
                    city: "深圳", //城市
                    carType: "MPV", //车辆类型
    // city: "6", //充值次数
                    topUpPrice: "120", //充值价格
                    memberLimit: "90", //会员限制
                    coupon: "3", //优惠券数量
                    couponPrice: "8", //优惠券金额
                    couponPriceLimit: "90" //优惠券有效期
                }
            ],
            cartype:[
                {id:0,name:"通用"},
                {id:1,name:"轿车"},
                {id:2,name:"SUV"},
                {id:3,name:"MPV"}
            ],
            carpattern:[
                {id:0,name:"通用"},
                {id:1,name:"精洗"},
                {id:2,name:"快洗"}
            ]
        };
    },
    filters: {
        // 车型
        filtype(type){
            if(type === 0){
                type = "通用"
            }else if(type === 1){
                type = "轿车"
            }else if(type === 2){
                type = "SUV"
            }else if(type === 3){
                type = "MPV"
            }else{return false}
            return type
        },
        // 洗车类型
        filstate(id){
            if(id === 0){
                id = "通用"
            }else if(id === 1){
                id = "精洗"
            }else if(id === 2){
                id = "快洗"
            }else{return false}
            return id
        },
    },
    methods: {
        add() {
            // 添加
            this.addVisible = true;
        },
        confirmAdd() {
            // 确认添加
            this.$refs.addClerk.validate((valid)=>{
                if(valid){
                    let data = {};
                    this.addVisible = false;
                    for(var i in this.addClerk) this.addClerk[i] !== "" ? data[i] = this.addClerk[i] : data[i] = "0";
                    data.run = 0;
                    data.level = 0;
                    data.type = 0;
                    data.city_type = 0;
                    this.addClerk[i] = "";
                    data.recharge_type = "1";
                    console.log(data)
                    utils.request("/rechargePackage/add","post",JSON.stringify(data)).then(resp=>{
                        console.log(resp)
                        if(resp.data.code === 200){
                            this.$message({
                                message: "套餐添加成功！",
                                type: "success"
                            })
                            data.id = resp.data.data;
                            data.coupon_money = data.coupon_money.substring(data.coupon_money.length-3) === ".00" ? data.coupon_money : data.coupon_money+".00"
                            this.clerkTable.length < this.curcity 
                            ? (this.clerkTable.push(data),this.pageResultSize +=1)
                            : "";
                        }
                    })
                }else{
                    console.log("错了")
                }
            })
        },
        cancelAdd() {
            // 取消添加
            // this.addClerk.serviceRevenue = "";
            // this.addClerk.afterEarnings = "";
            for(var i in this.addClerk) this.addClerk[i] = "";
            this.addVisible = false;
        },
        closeAdd() {
            // 关闭添加
            // this.addClerk.serviceRevenue = "";
            // this.addClerk.afterEarnings = "";
            for(var i in this.addClerk) this.addClerk[i] = "";
            this.addVisible = false;
        },
        edit(index, row) {
            // 修改
            // console.log(index,row);
            for(var i in this.editClerk) this.editClerk[i] = row[i];
            this.editClerk.index = index;
            // console.log()
            this.editVisible = true;
        },
        confirmEdit() {
            // 确认修改
            let data = {},key;
            this.editVisible = false;
            for(var i in this.editClerk) i !== "index" ? data[i] = this.editClerk[i] : key = this.editClerk.index;
            this.editClerk[i] = "";
            console.log(data,key)
            utils.request("/rechargePackage/update","post",JSON.stringify(data)).then(resp=>{
                console.log(resp)
                if(resp.data.code === 200){
                    data.coupon_money = data.coupon_money.substring(data.coupon_money.length-3) === ".00" ? data.coupon_money : data.coupon_money+".00"
                    this.clerkTable.splice(key,1,data);
                }
            })
        },
        cancelEdit() {
            // 取消修改
            // this.editClerk.serviceRevenue = "";
            // this.editClerk.afterEarnings = "";
            for(var i in this.editClerk) this.editClerk[i] = "";
            this.editVisible = false;
        },
        closeEdit() {
            // 关闭修改
            // this.editClerk.serviceRevenue = "";
            // this.editClerk.afterEarnings = "";
            for(var i in this.editClerk) this.editClerk[i] = "";
            this.editVisible = false;
        },
        delClerk(index, row) {
            // 删除
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                
                utils.request("/rechargePackage/delete","post",JSON.stringify({id:row.id})).then(resp=>{
                    console.log(resp)
                    if(resp.data.code === 200){ 
                        this.clerkTable.splice(index,1);
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }
                });

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        carTypeFilterHandler(value, row, column) {
            // 车辆类型筛选过滤事件
            const property = column["property"];
            console.log(value, row, column,property)
            return row[property] === value;
        },
        //   表格居中
        cellStyle: function({ row, column, rowIndex, columnIndex }) {
            return "text-align:center;";
        },
        rowClass: function({ row, rowIndex }) {
            return "text-align:center;";
        },
        allSelectionChange: function(val) {
            // 获取选中的内容
            console.log(val);
        },
        // 每页数据的数量 carTypeList
        city: function(val) {
            this.curcity = val;
            utils.request("/rechargePackage/list","post",JSON.stringify({page:this.currentPage,list_rows:this.curcity,recharge_type:"1"})).then(resp=>{
                console.log(resp)
                this.clerkTable = resp.data.data.data;
                this.pageResultSize = resp.data.data.total;
            })
        },
        // 点击的第几页
        currentcity: function(val) {
            this.currentPage = val;
            utils.request("/rechargePackage/list","post",JSON.stringify({page:this.currentPage,list_rows:this.curcity,recharge_type:"1"})).then(resp=>{
                console.log(resp)
                this.clerkTable = resp.data.data.data;
                this.pageResultSize = resp.data.data.total;
            })
        },
    },
    created() {
        let Base64 = require("js-base64").Base64;
        let menuarr = JSON.parse(Base64.decode(sessionStorage.getItem("menuarr")))
        for(var i=0;i<menuarr.length;i++){
            // console.log(menuarr[i].link)
            if(menuarr[i].link === this.$route.meta.JumpPath){
                this.jurisdiction = menuarr[i]
            }else{}
        }
        utils.request("/rechargePackage/list","post",JSON.stringify({page:this.currentPage,list_rows:this.curcity,recharge_type:"1"})).then(resp=>{
            console.log(resp)
            this.clerkTable = resp.data.data.data;
            this.pageResultSize = resp.data.data.total;
        })
        utils.request("/city/list","post",JSON.stringify({page:1,list_rows:999999999})).then(resp=>{
            // console.log("店铺",resp)
            this.cityname = resp.data.data.data;
        })
    }
};
</script>
